<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src='jquery.js'></script>
</head>
<body>
        <center > 
        <h3>歌曲搜索系统</h3>
        <input type="text" id='keyword' placeholder="请输入歌词或歌名" >  <button>搜索</button>
        <div id='showsongs'>
            
        </div>
        </center> 
</body>
<script>
    $("button").bind('click',function(){
        var keyword=$("#keyword").val();
        if($.trim(keyword)==''){
            return false;
        }
        $.post("./songs.php",{"keyword":keyword},function(data){
            console.log(data);
            //有数据清空
            if(data.length!=0){
                    $("#showsongs").empty();//清空数据
            }
            //循环数据
            var html='';
            $.each(data,function(k,v){
                console.log(v);
                html+="<span>歌名:"+v[1]+"</span>";
                html+="<p>歌名:"+v[3]+"</p><hr>";
            });
            //追加html到id=showsongs的div中去
            $("#showsongs").append(html);
        },'json');
    });
</script>
</html>